<template>
  <div id="info" style="position: relative">
    <h1><a href="http://github.com/tweenjs/tween.js">tween.js</a></h1>
    <h2>补间值的数组</h2>
    <p>The different interpolations if arrays are used as values.</p>
  </div>

  <div id="target"></div>
</template>

<script setup lang="ts">
import { TWEEN } from "three/examples/jsm/libs/tween.module.min.js";
import createGraph from "./core/createGraph";
import { ref, onMounted } from "vue";

function init() {
  var target = document.getElementById("target");

  var width = 240,
    height = 160;

  // random points
  /*
				var x0 = Math.random() * ( width - 40 ) + 20,
					y0 = Math.random() * ( height - 40 ) + 20,
					xA = [],
					yA = [];
				for ( var i = 0; i < 10; i++ ) {
					xA.push( Math.random() * ( width - 40 ) + 20 );
					yA.push( Math.random() * ( height - 40 ) + 20 );
				}
				*/

  // fixed points

  var min = 1 / 6,
    max = 5 / 6;

  var x0 = width * min,
    y0 = height / 2,
    xA = [width * max, width / 2],
    yA = [height * min, height * max];

  target.appendChild(createPath("Linear", TWEEN.Interpolation.Linear));
  target.appendChild(createPath("Bezier", TWEEN.Interpolation.Bezier));
  target.appendChild(createPath("CatmullRom", TWEEN.Interpolation.CatmullRom));

  target.appendChild(document.createElement("br"));

  xA.push(x0);
  yA.push(y0);

  target.appendChild(createPath("start === end", TWEEN.Interpolation.Linear));
  target.appendChild(createPath("", TWEEN.Interpolation.Bezier));
  target.appendChild(createPath("", TWEEN.Interpolation.CatmullRom));

  function createPath(title, interpolation) {
    var div = document.createElement("div");
    div.style.display = "inline-block";
    div.style.width = width + 20 + "px";
    div.style.height = height + 20 + "px";

    var canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;

    var context = canvas.getContext("2d");
    context.fillStyle = "rgb(250,250,250)";
    context.fillRect(0, 0, width, height);

    context.fillStyle = "rgb(200,200,200)";
    context.fillRect(x0 - 3, y0 - 3, 6, 6);
    context.fillRect(xA[xA.length - 1] - 3, yA[yA.length - 1] - 3, 6, 6);

    for (var i = 0; i < xA.length; i++) {
      context.fillRect(xA[i] - 2, yA[i] - 2, 4, 4);
    }

    context.lineWidth = 2;
    context.strokeStyle = "rgba(255,127,127,0.9)";

    var obj = { x: x0, y: y0, old: { x: x0, y: y0 } };

    new TWEEN.Tween(obj)
      .to({ x: xA, y: yA }, 3000)
      .onUpdate(function (object) {
        context.beginPath();
        context.moveTo(object.old.x, object.old.y);
        context.lineTo(object.x, object.y);
        context.closePath();
        context.stroke();

        object.old.x = object.x;
        object.old.y = object.y;
      })
      .interpolation(interpolation)
      .easing(TWEEN.Easing.Linear.None)
      .delay(250)
      .start();

    div.appendChild(document.createTextNode(title));
    div.appendChild(document.createElement("br"));
    div.appendChild(canvas);

    return div;
  }
}

function animate(time?) {
  requestAnimationFrame(animate);

  TWEEN.update(time);
}
onMounted(() => {
  init();
  animate();
});
</script>

<style>
body {
  margin: 0px;
}

#target {
  font-size: 13px;
  padding: 0px 32px;
}
</style>
